<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=0.5, maximum-scale=0.5,minimum-scale=0.5,user-scalable=0" />
        
    <title>钢琴原创谱系统</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/todoList.css">
    <link rel="stylesheet" href="./css/demo.css">
    <link rel="stylesheet" href="./css/iconfont/iconfont.css">
    <link rel="shortcut icon" href="favicon.ico">
</head>

<body>
    <div class="logo"></div>
    <div class="piano-box">
        <div class="nav-box no-select">
            <div class="left-side">
                <div class="title">计划</div>
                <div class="left-side-con">
                    <div class="flex-box">
                        <img src="images/surface-icon.png">
                        <div class="txt">
                            <p><span style="margin-left: 0;" id="hours">0</span>小时<span id="minutes">0</span>分钟<span
                                    id="seconds">0</span>秒</p>
                            </p>
                            <p style="color: #5799ff; font-size: 14px;">今日使用时长</p>
                        </div>
                    </div>
                    <!--计划列表-->
                    <div class="plan-list" style="overflow-y: auto; height: 440px;">
                        <div class="container">
                            <div class="calendar" style="display: none;">
                                <span id="prevMonth">
                                    < </span>
                                        <span id="currentMonthYear"></span>
                                        <span id="nextMonth">></span>
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>日</th>
                                                    <th>一</th>
                                                    <th>二</th>
                                                    <th>三</th>
                                                    <th>四</th>
                                                    <th>五</th>
                                                    <th>六</th>
                                                </tr>
                                            </thead>
                                            <tbody id="calendarBody"></tbody>
                                        </table>
                            </div>
                            <div class="plan">
                                <!--深蓝到浅蓝背景过渡的进度条，进度条的底色是灰色-->
                                <h3>今日任务 <span style="float: right;"><span id="completedPlans"></span>/<span
                                            id="totalPlans"></span></span>
                                </h3>
                                <div id="progress-bar">
                                    <div id="progress-bar-inner"></div>
                                </div>
                                <!-- <form id="planForm"> -->
                                <!-- <input type="text" id="planTitle" placeholder="标题">
                                    <textarea id="planDescription" placeholder="描述"></textarea> -->
                                <button class="add-plan"><span class="icon iconfont icon-add" style="font-size: 30px;"></span></button>
                                <!-- </form> -->
                                <div class="plan-list" id="planList"></div>
                                <div class="data-no"><img src="./images/noDataBg.png" style="width: 200px;"><span style="display: block;">暂无计划</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-side">
                <div class="right-side-item right-one fillet" onclick="window.location.href='free.html'">
                    <p>自由弹奏模式</p>
                    <p>用电脑键盘练习</p>
                </div>
                <div class="right-side-item right-two fillet" onclick="window.location.href='knowledge.html'">
                    <p>即兴知识查询</p>
                    <p>和弦、音阶、音程查询</p>
                </div>
                <div class="right-side-item right-three fillet" onclick="window.location.href='spectrumList.html'">
                    <p>查询谱例</p>
                    <p>查询简易和弦谱</p>
                </div>
                <div class="right-side-item right-four fillet" onclick="window.location.href='course.html'">
                    <p>课程中心</p>
                    <p>精心录制的课程目录</p>
                </div>
            </div>
        </div>
    </div>

    <!--计划弹窗-->
    <div class="popup-container">
        <div class="popup">
            <div class="popup-header">
                <h2>计划</h2>
                <span class="close">&times;</span>
            </div>
            <div class="popup-body">
                <form id="planForm">
                    <input type="text" id="planTitle" placeholder="标题">
                    <textarea id="planDescription" placeholder="描述" style="height: 100px;resize:none"></textarea>
                    <button class="save-plan">保存</button>
                </form>
            </div>
        </div>
    </div>

    <!--云朵背景图-->
    <div class="cloud-box"></div>
    <script src="./js/jquery.js"></script>
    <script src="./js/todoList.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/public.js"></script>
</body>

</html>